<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import * as Cesium from 'cesium'
import "./Widgets/widgets.css"
// 设置静态资源路径
window.CESIUM_BASE_URL = "/"
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZTkyZDVmZS03MGNiLTQ4YmQtYTUwMS02YTI0Y2E4OTE2YjciLCJpZCI6MjY1MjI2LCJpYXQiOjE3MzUyODM3MDJ9.HX2jU9DxJdbu9WYQW9iFkLTvSgJtTnBehN89Da7ImUw'



const rectPrimitive = new Cesium.Primitive({
    // geometryInstances: [rectInstance,circleInstance],
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
    })
  })
// 设置cesium默认视角
// Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
//   89.5,  //西边经度
//   20.4,   //南边纬度
//   110.4,  //东边经度
//   61.2  //北边纬度
// )

onMounted(async () => {
  console.log(Cesium)
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 是否显示信息窗口
    infoBox: false,
    // 搜索按钮
    geocoder: false,
    // home按钮
    
    homeButton: false,
    // 控制查看器显示模式
    sceneModePicker: false,
    // 是否显示涂层选择器
    baseLayerPicker: false,
    // 是否显示动画控件
    animation: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 全屏按钮
    fullscreenButton: false,
    // 是否显示VR控件
    // vrButton:false,
    // 是否显示时间轴控件
    timeline: false,
    sunLightFlag: true, //太阳光照开关
    globeFlag: true,
    // 设置天空盒子

    // 控制默认地图显示
    // imageryProvider: false,
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestVertexNormals: true,
      requestWaterMask: true
    })

  })

})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
